<template>
	<view class="user-item">
		<view class="img-tab" @tap="toUserInfo"><image :src="user.headUrl" mode="widthFix"></image></view>
		<!-- <view class="user-desc">{{ user.userDesc }}</view> -->
		<view class="user-follow">
			<view @tap="thumbsUp(index)" class="icon iconfont " :class="[user.isFollow ? 'icon-xihuan' : 'icon-03']">{{ user.followNum }}</view>
			<view @tap="tipoff" class="">...</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		user: Object,
		index: Number
	},
	methods: {
		toUserInfo() {
			uni.navigateTo({
				url: `../user-info/user-info?userId=${this.user.userId}`
			});
		},
		tipoff() {
			uni.navigateTo({
				url: `../tipoff/tipoff?userId=${this.user.userId}`
			});
		},
		thumbsUp(index) {
			this.$emit('userFollow', index);
		}
	}
};
</script>

<style lang="less" scoped>
.user-item {
	border-top: 0.1rpx solid transparent;
	margin-top: 20rpx;
	box-shadow: 0 6rpx 12rpx 0 rgba(0, 0, 0, 0.15);
	border-radius: 20rpx;

	.img-tab {
		width: 320rpx;
		height: 320rpx;
		overflow: hidden;
		border-radius: 20rpx;
		image {
			width: 100%;
		}
	}

	.user-desc {
		height: 50rpx;
		width: 320rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 32rpx;
		line-height: 32rpx;
	}

	.user-follow {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.icon-xihuan {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #999999;
			font-size: 24rpx;
		}
		.icon-xihuan::before {
			font-size: 24rpx;
			color: #ffbcd1;
			text-align: center;
			margin-left: 30rpx;
		}
		.icon-03 {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #999999;
			font-size: 24rpx;
		}
		.icon-03::before {
			font-size: 28rpx;
			color: #ffbcd1;
			margin-right: 10rpx;
			margin-left: 30rpx;
			text-align: center;
		}
		& > view:last-child {
			color: #999999;
			font-size: 28rpx;
			margin-right: 40rpx;
			margin-top: -20rpx;
		}
	}
}
</style>
